<template>
  <div class="app-container">
    <el-form class="formList" :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="80px"
      @keyup.enter.native="handleQuery">
      <el-row>
        <el-form-item label="商品名称" prop="productName">
          <el-input v-model="queryParams.productName" placeholder="请输入商品名称" clearable size="small" class="input-rule" />
        </el-form-item>
        <el-form-item label="商品分类" prop="categoryUid">
          <el-cascader :props="{ checkStrictly: true }" v-model="queryParams.categoryUid" :options="categoryOptions" clearable filterable size="small"
            class="input-rule">
          </el-cascader>
        </el-form-item>
        <el-form-item label="品牌" prop="brandUid">
          <el-select v-model="queryParams.brandUid" placeholder="请选择品牌" clearable size="small" class="input-rule">
            <el-option v-for="brand in brandOptions" :key="brand.brandUid" :label="brand.brandName"
              :value="brand.brandUid" />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="供货价" prop="costPrice">
          <el-input v-model="queryParams.minCostPirce" clearable size="small" style="width: 100px;"
            @blur="queryParams.minCostPirce=checkNumber(oninput(queryParams.minCostPirce,2),oninput(queryParams.maxCostPirce,2),1)" />
          <span style="margin: 0 5px;"> 至 </span>
          <el-input v-model="queryParams.maxCostPirce" clearable size="small" style="width: 100px;"
            @blur="queryParams.maxCostPirce=checkNumber(oninput(queryParams.minCostPirce,2),oninput(queryParams.maxCostPirce,2),2)" />
        </el-form-item>
        <el-form-item label="零售价" prop="retailPrice">
          <el-input v-model="queryParams.minRetailPrice" clearable size="small" style="width: 100px;"
            @blur="queryParams.minRetailPrice=checkNumber(oninput(queryParams.minRetailPrice,2),oninput(queryParams.maxRetailPrice,2),1)" />
          <span style="margin: 0 5px;"> 至 </span>
          <el-input v-model="queryParams.maxRetailPrice" clearable size="small" style="width: 100px;"
            @blur="queryParams.maxRetailPrice=checkNumber(oninput(queryParams.minRetailPrice,2),oninput(queryParams.maxRetailPrice,2),2)" />
        </el-form-item>
        <el-form-item label="批发价" prop="tradePrice" v-if="0>1">
          <el-input v-model="queryParams.minTradePrice" clearable size="small" style="width: 100px;"
            @blur="queryParams.minTradePrice=checkNumber(oninput(queryParams.minTradePrice,2),oninput(queryParams.maxTradePrice,2),1)" />
          <span style="margin: 0 5px;"> 至 </span>
          <el-input v-model="queryParams.maxTradePrice" clearable size="small" style="width: 100px;"
            @blur="queryParams.maxTradePrice=checkNumber(oninput(queryParams.minTradePrice,2),oninput(queryParams.maxTradePrice,2),2)" />
        </el-form-item>

        <el-form-item label="累计销量" prop="buyNum">
          <el-input v-model="queryParams.minBuyNum" clearable size="small" style="width: 100px;"
            @blur="queryParams.minBuyNum=checkNumber(checkNumberOne(queryParams.minBuyNum),checkNumberOne(queryParams.maxBuyNum),1) " />
          <span style="margin: 0 5px;"> 至 </span>
          <el-input v-model="queryParams.maxBuyNum" clearable size="small" style="width: 100px;"
            @blur="queryParams.maxBuyNum=checkNumber(checkNumberOne(queryParams.minBuyNum),checkNumberOne(queryParams.maxBuyNum),2)" />
        </el-form-item>
      </el-row>
      <el-row>

        <el-form-item label="商品标签">
          <el-select v-model="queryParams.tagsUid" placeholder="请选择标签" clearable multiple style="width: 360px;">
            <el-option v-for="tags in tagsOptions" :key="tags.tagsUid" :label="tags.tagsName" :value="tags.tagsUid" />
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 22px;">
          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-row>
    </el-form>
<!--
    <el-row :gutter="12" class="row-mbinfo">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
-->
    <div class="divTable" style="margin-top: 10px">
      <el-table v-loading="loading" :data="infoList" border>
        <el-table-column label="商品图片" align="center" prop="carouselImgOne" width="130">
          <template slot-scope="scope">
            <el-image v-if="scope.row.carouselImgOne != null && scope.row.carouselImgOne != '' " slot="reference"
              :src="scope.row.carouselImgOne" class="image-rows" :preview-src-list="[scope.row.carouselImgOne]">
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" align="left" prop="productName" min-width="100">
          <template slot-scope="scope">
            <a style="color: #1890ff;" @click="handledetail(scope.row)">{{ scope.row.productName }}
            </a>
          </template>
        </el-table-column>
        <el-table-column label="供货价" align="center" prop="costPriceStr" sortable width="100" />
        <el-table-column label="零售价" align="center" prop="retailPriceStr" sortable width="100" />
        <el-table-column v-if="0>1" label="批发价" align="center" prop="tradePriceStr" sortable width="100" />
        <el-table-column label="库存" align="center" prop="stockNumber" sortable width="100" />
        <el-table-column label="预警数量" align="center" prop="warningNumber" sortable width="100" />
        <el-table-column label="销量" align="center" prop="buyNum" sortable width="100" />
        <el-table-column label="访问次数" align="center" prop="viewNum" sortable width="100" />
        <el-table-column label="更新时间" align="center" prop="updateTime" width="180" sortable>
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span><br />
            <span>{{ statusFormat(scope.row.dataStatus) }}</span>
          </template>
        </el-table-column>

      </el-table>

      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <productDetail :uid="productViewUid" :key="productViewUid"></productDetail>
    </el-dialog>


  </div>
</template>

<script>
  import {
    listInfoWarning,
    getInfo,
    delInfo,
    addInfo,
    updateInfo,
    getInfoDetail
  } from "@/api/product/info";
  import {
    selectOptions
  } from "@/api/product/category";
  import {
    bulidBrandSelect
  } from "@/api/product/brand";
  import imageArray from "@/components/ImageUpload/imageArray";
  import productDetail from "@/components/Product/productDetail";
  import {
    bulidTagsSelect
  } from "@/api/product/tags";
  export default {
    name: "Info",
    components: {
      imageArray,
      productDetail
    },
    data() {
      return {
        tagsOptions: [],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 地区信息
        options: [],

        //品牌
        brandOptions: [],
        // 商品类别
        categoryOptions: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 商品信息表格数据
        infoList: [],
        // 弹出层标题
        title: "",
        //查看详细标题
        viewTitle: "",
        // 是否显示弹出层
        open: false,
        //是否显示查看详细弹出层
        viewOpen: false,
        //查看详细数据
        showData: [],
        // 用于查询详细的uid
        productViewUid: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          productName: null,
          categoryUid: null,
          brandUid: null,
          minBuyNum: "",
          maxBuyNum: "",
          minCostPirce: "",
          maxCostPirce: "",
          minRetailPrice: "",
          maxRetailPrice: "",
          minTradePrice: "",
          maxTradePrice: "",
          dataStatus: null,
          auditStatus: null,
          stockNumber: null,
          categoryUidOne: null,
          categoryUidTwo: null,
          categoryUidThree: null,
        },
        columns: [],
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          productName: [{
            required: true,
            message: "商品名称不能为空",
            trigger: "blur"
          }],
        }
      };
    },
    created() {
      this.getList();
      selectOptions().then(response => {
        this.categoryOptions = response.data;
      });
      let brand = {
        dataStatus: "1",
        dataPriority: "0",
        pageNum: 1,
        pageSize: 100
      }
      bulidBrandSelect(brand).then(respone => {
        this.brandOptions = respone.rows;
      });
      bulidTagsSelect().then(respone => {
        this.tagsOptions = respone.data;
      });
    },
    methods: {
      checkNumberOne(value) {
        console.log(value)
        return value.replace(/^(0+)|[^\d]+/g, '')
      },
      checkNumber(minNum, maxNum, index) {

        if (index == 1) {
          if (minNum == "") {
            return "";
          }
          if (maxNum == "") {
            return minNum;
          }
          let min = parseFloat(minNum);
          let max = parseFloat(maxNum);
          if (min > max) {
            return maxNum;
          } else {
            return minNum;
          }
        } else {

          if (maxNum == "") {
            return "";
          }
          if (minNum == "") {
            return maxNum;
          }
          let min = parseFloat(minNum);
          let max = parseFloat(maxNum);
          if (min > max) {
            return minNum;
          } else {
            return maxNum;
          }
        }


      },
      oninput(num, limit) {

        if (num == "") {
          return "";
        }
        var str = num
        var len1 = str.substr(0, 1)
        var len2 = str.substr(1, 1)
        if (str.length > 1 && len1 == 0 && len2 != ".") {
          str = str.substr(1, 1)
        }
        if (len1 == ".") {
          str = ""
        }
        if (str.indexOf(".") != -1) {
          var str_ = str.substr(str.indexOf(".") + 1)
          if (str_.indexOf(".") != -1) {
            str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
          }
        }
        //正则替换
        str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
        if (limit / 1 === 1) {
          str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
        } else {
          str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位

          if (str.indexOf(".") == str.length - 1) {
            str = str.substring(0, str.length - 1);
          }
        }

        return str
      },

      /** 查询商品信息列表 */
      getList() {
        this.loading = true;

        if (this.queryParams.categoryUid != null && this.queryParams.categoryUid.length > 0) {
          let uidArray = this.queryParams.categoryUid;
          this.queryParams.categoryUidOne = uidArray[0];
          if (uidArray.length > 1) {
            this.queryParams.categoryUidTwo = uidArray[1];
          }
          if (uidArray.length > 2) {
            this.queryParams.categoryUidThree = uidArray[2];
          }
        }
        listInfoWarning(this.queryParams).then(response => {
          this.infoList = response.rows;
          this.total = response.total;
          this.loading = false;
          this.queryParams.categoryUidOne = null;
          this.queryParams.categoryUidTwo = null;
          this.queryParams.categoryUidThree = null;
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {};
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.queryParams.minBuyNum = null;
        this.queryParams.maxBuyNum = null;
        this.queryParams.minCostPirce = null;
        this.queryParams.maxCostPirce = null;
        this.queryParams.minRetailPrice = null;
        this.queryParams.maxRetailPrice = null;
        this.queryParams.maxTradePrice = null;
        this.queryParams.minTradePrice = null;
        this.handleQuery();
      },
      statusFormat(status) {
        let showStatus = "";
        if (status == "1") {
          showStatus = "销售中";
        } else {
          showStatus = "已下架"
        }
        return showStatus;
      },
      /** 查询详细 */
      handledetail(row) {
        /* this.title = "商品详情";
         this.open = true;
         this.productViewUid = row.productUid;*/
        const productUid = row.productUid
        this.$router.push("/product/detail/" + productUid);
      }
    }
  };
</script>
<style scoped="scoped">
  .input-rule {
    width: 232.45px;
  }

  .row-mb2 {
    margin: -7.5px -7.5px 7.5px -7.5px;
  }

  .button-sku-blue {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }

  .product-header {
    position: absolute;
    top: 0;
    width: 600px;
    padding: 18px;
    background-color: #fff;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  .product-div {
    position: relative;
    padding-right: 16px;
    padding-top: 54px;
    border: 1px solid #ebebeb;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  .place {
    width: 400px;
  }
  .image-rows{
    height: 100px;
    width: 100px;
  }
</style>
